<template>
  <div>
    <FosoForm
      ref="formRef"
      :form-columns="formColumns"
      :form-columns-num="8"
      :form-data="formData"
      :form-expand="true"
      label-width="100px"
      @search-handle="searchHandle"
    />
  </div>
</template>

<script setup lang="ts">
import type { UserType } from '../type';

import type { PositionInfo } from '#/api/sys/model/positionModel';

import { $t } from '@vben/locales';

import { getRoleList } from '#/api/sys/role';
import FosoForm from '#/components/FosoForm/index.vue';

const emit = defineEmits(['search']);
// 表单数据
const formData = ref<UserType>({});
const roleOptions = ref();
// 表单实例
const formRef = ref();
const searchHandle = () => {
  emit('search', {
    ...formData.value,
    roleIds: formData.value.roleIds?.join(','),
  });
};
// 表单配置项
const formColumns = computed(() => [
  {
    label: $t('sys.login.username'), // 表单项的标签
    prop: 'username', // 绑定到 formData.name
    xType: 'Input',
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: $t('sys.user.nickname'), // 表单项的标签
    prop: 'nickname', // 绑定到 formData.name
    xType: 'Input',
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: $t('sys.role.roleTitle'), // 表单项的标签
    prop: 'roleIds', // 绑定到 formData.name
    xType: 'Select',
    componentProps: {
      placeholder: '请输入',
      multiple: true,
      clearable: true,
      options: roleOptions.value,
    },
  },
  {
    label: $t('sys.login.mobile'), // 表单项的标签
    prop: 'mobile', // 绑定到 formData.name
    xType: 'Input',
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: $t('sys.login.email'), // 表单项的标签
    prop: 'email', // 绑定到 formData.name
    xType: 'Input',
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
]);

// 获取角色列表数据
const getroleOptions = async () => {
  const roleRes = await getRoleList({ page: 1, pageSize: 500 });
  roleOptions.value = roleRes.data.map((item: PositionInfo) => ({
    label: item.remark || '',
    value: item.id,
  }));
};
getroleOptions();
</script>

<style scoped></style>
